﻿@model HmPMer.Entity.UserBase
@{
    ViewBag.Title = "手机认证";
    ViewBag.PageUri = "/center/safety";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
    var Type = Request["Type"];
}


<div class="container-fluid">
    <div id="pad-wrapper" class="form-page">

        <div class="row-fluid head">
            <div class="span12">
                <h4>@(Type == "1" ? "手机修改" : "")</h4>
            </div>
        </div>

        <div class="row-fluid withdraw">

            <div class="field-box withdrawApply">
                <label>验证码:</label>
                <input class="span2 inline-input" placeholder="请输入右则图形验证码" type="text" id="ImgCode" maxlength="4" />
                <img id="img_code" src="/DrawingApi/GetValidateImg?codeKey=imgphonevcode" alt="" onclick="this.src = '/DrawingApi/GetValidateImg?codeKey=imgphonevcode&t=' + Math.random();" height="20" style="cursor:pointer" />
            </div>

            <div class="field-box withdrawApply">
                <label>手机号码</label><input class="span2 inline-input" placeholder="请输入手机号码" value="@Model.MobilePhone" id="MobilePhone" name="MobilePhone" type="text" />
                <span class="btn-flat white" id="GetSmsCode">获取验证码</span>
            </div>

            <div class="field-box withdrawApply">
                <label>短信验证码:</label>
                <input class="span2 inline-input" placeholder="点击上方按钮获取短信验证码" id="PhoneCode" name="PhoneCode" type="text" />
            </div>

            <div class="span11 field-box actions">

                @if (Model.IsMobilePhone == 0 || Type == "1")
                {
                    <label></label>
                    <input type="button" class="btn-glow primary" value="确认提交" id="btn_submit">
                }
                else
                {
                    <span style="color:red;font-size:16px;margin-left:20px;">您已经进行手机认证</span>
                }
            </div>

        </div>
    </div>
</div>

<script>
    $(function () {
        var codeClick = false;

        $("#GetSmsCode").click(function () {

            if (codeClick) {
                return;
            }

            var imgCode = $.trim($("#ImgCode").val());
            if (imgCode == '') {
                layer.msg('请输入图片验证码', { icon: 5 });
                $('#ImgCode').focus();
                return;
            }

            if (imgCode.length != 4) {
                layer.msg('图片验证码输入错误', { icon: 5 });
                $('#ImgCode').focus();
                return;
            }

            var Mobile = $("#MobilePhone").val();
            if (Mobile == '') {
                layer.msg('请输入手机号码', { icon: 5 });
                $('#MobilePhone').focus();
                return;
            }

            if (!validate.isMobile(Mobile)) {
                layer.msg('手机格式错误', { icon: 5 });
                $('#MobilePhone').focus();
                return;
            }

            //获取短信验证码
            $.post("/DrawingApi/SendMobileCode", { "Mobile": '@Model.MobilePhone', "SmsKey": "smsphonevcode", "ImgCode": imgCode, "ImgCodeKey": "imgphonevcode", SmsCode: "renzheng" }, function (data) {
                if (data.IsSuccess) {
                    layer.msg('获取短信验证码成功', { icon: 5 });
                    codeClick = true;
                    var showText = '%s s重新获取';
                    var $this = $("#GetSmsCode");

                    if ($this.data('alt_button_disable_rendered') == 0) {
                        return false;
                    }
                    setTimeout(function () {
                        var count = 60;
                        setText();
                        $this.addClass("cur");
                        function setText() {
                            $this.html(showText.replace('%s', count));

                            if (count > 0) {
                                count--;
                                $this.data('alt_button_disable_rendered', 0);
                                setTimeout(setText, 1000);
                            } else {
                                codeClick = false;
                                $this.html('重新获取');
                                $this.data('alt_button_disable_rendered', 1);
                            }
                        }
                    }, 10);

                } else {
                    layer.msg(data.message, { icon: 5 });
                    return false;
                }

            });

            return;
        });



        $("#btn_submit").click(function () {
            
            var Mobile = $("#MobilePhone").val();
            if (Mobile == '') {
                layer.msg('请输入手机号码', { icon: 5 });
                $('#MobilePhone').focus();
                return;
            }

            if (!validate.isMobile(Mobile)) {
                layer.msg('手机格式错误', { icon: 5 });
                $('#MobilePhone').focus();
                return;
            }

            var PhoneCode = $.trim($("#PhoneCode").val());

            if (PhoneCode == '') {
                layer.msg('请输入短信验证码', { icon: 5 });
                $("#PhoneCode").focus();
                return;
            }

            $.HM.ajax("center/AuthPhoneIn", {
                data: {
                    Mobile: Mobile,
                    SmsCode: PhoneCode,
                    SmsKey: "smsphonevcode"
                },
                type: "GET",
                dataType: 'json',
                success: function (d) {

                    if (d.IsSuccess) {
                        layer.alert(d.message, { icon: 1 });
                        setTimeout(function () {
                            window.location = window.location.href;
                        }, 1200);
                    } else {
                        // layer.tips(d.message);
                        layer.msg(d.message, { icon: 5 });
                        return;
                    }
                }
            });
        });
    });
</script>